<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟组件间传值</title>
</head>

<body>
  <div id="app">
    <div>
      <h2>父组件</h2>
      <button @click='handle'>销毁事件</button>
    </div>
    <brother-ze></brother-ze>
    <sister-meng></sister-meng>
  </div>
  <script src="../vue.js"></script>
  <!-- 模拟情景:熊孩子哥哥由于玩具争夺打了妹妹,妹妹于是委屈的哭了起来并向妈妈诉苦 -->
  <script>
    // 提供事件中心 监听组件事件
    const hub = new Vue()

    Vue.component('brother-ze', {
      data() {
        return {
          num: 10
        }
      },
      // 模板字符串
      template: `<div>
                  <p>哥哥ze:我现在有{{num}}块积木</p>
                  <button @click='hit'>揍妹妹</button>
                </div>`,
      methods: {
        hit() {
          if (this.num < 10) {
            // 触发妹妹哭泣事件
            hub.$emit('meng-event', "委屈的哭了")
          } else {
            alert('没有揍妹妹的理由')
          }
        }
      },
      mounted() {
        // 监听事件 val是对方传来的数据
        hub.$on('ze-event', (val) => {
          this.num -= val
        })
      }
    })

    // 妹妹抢哥哥积木 除了自己积木变多以外 哥哥的积木也应该相应减少
    Vue.component('sister-meng', {
      data() {
        return {
          num: 0,
          cry: "向妈妈告发并"
        }
      },
      // 模板字符串
      template: `<div>
                  <p>妹妹meng:我现在有{{num}}块积木</p>
                  <button @click='rob'>抢积木</button>
                  <strong>{{cry}}</strong>
                </div>`,
      methods: {
        rob() {
          if (this.num < 10) {
            // 触发兄弟组件的事件
            hub.$emit('ze-event', 1)
            this.num++;
          } else {
            alert('哥哥的积木被抢光了')
          }
        }
      },
      // TODO mounted钩子函数一旦被触发 表示模板已经就绪了
      mounted() {
        // 监听事件 val是对方传来的数据
        hub.$on('meng-event', (val) => {
          this.cry += val
        })
      }
    })

    new Vue({
      el: '#app',
      methods: {
        // 从父组件销毁事件
        handle() {
          hub.$off('ze-event')
          hub.$off('meng-event')
        }
      }
    })
  </script>
</body>

</html>